<template>
	<view class="m-capsule x-f">
		<uni-icons fontFamily="CustomFontPlatform" color="#fff" :size="18">{{$utils.toUniCode('&#xe675;')}}</uni-icons>
		<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
		<uni-icons fontFamily="CustomFontPlatform" color="#fff" @click="handleClose"
			:size="18">{{$utils.toUniCode('&#xe64a;')}}</uni-icons>
	</view>
</template>

<script>
	/**
	 * 自定义胶囊组件
	 * @param {Function} closeHandler 关闭按钮事件方法
	 * @param {Number,String} closeCurrent 返回页面数量
	 */
	export default {
		name: "m-capsule",
		props: {
			// 关闭按钮事件方法
			closeHandler: {
				type: Function,
				default: null
			},
			// 返回页面数量
			closeCurrent: {
				type: [Number, String],
				default: () => {
					return 999
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleClose() {
				// 当存在自定义点击事件时
				if (this.closeHandler) {
					this.closeHandler();
				} else {

					uni.navigateBack({
						delta: +this.closeCurrent
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.m-capsule {
		border: 1px solid #fff;
		color: #fff;
		padding: 6px 12px;
		overflow: hidden;
		border-radius: 9999px;
	}
</style>